<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        #root{
            width:1000px;
            display:flex;/*采用flex布局*/
            flex-wrap:wrap;/*换行，默认不换行*/
        }
        #head{
            height:100px;
           background: purple;
        }
        #mid{
            display:flex;/*采用flex布局*/
        }
        #left{
            background: greenyellow;
            width:300px;
        }
        #right{
            background: purple;
            width:700px;
        }
        #foot{
            height:100px;
            background: black;
        }
    </style>
</head>
<body>
<div id="root">
    <div id="head"></div>
    <div id="mid">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="foot"></div>
</div>
</body>
</html>